<template>
	<div class="container">
		<!-- 搜索 -->
		<search-Bar></search-Bar>
		<section>
			<div>
				<my-table :table-data="tableData" :col-configs="colConfigs" :list-loading="listLoading" :total="total"
					:page-size="listQuery.pagesize" @refreshList="getList" @sortChange="sortChange">
					<el-table-column slot="opt" label="操作" width="120px">
						<template slot-scope="{ row }">
							<span class="iconfont bg-edit" @click="handleDetail(row)">&#xe66c;</span>
							<span class="iconfont bg-stop" @click="dialogFormVisibleUpdate = true">&#xe66d;</span>
						</template>
					</el-table-column>
					<el-table-column slot="patient_class" label="就诊类型" width="120px">
						<template slot-scope="{ row }">
							<span v-if="row.patient_class === 0">门诊</span>
							<span v-if="row.patient_class === 1">住院</span>
							<span v-if="row.patient_class === 2">急诊</span>
							<span v-if="row.patient_class === 3">体检</span>
							<span v-if="row.patient_class === 4">普通</span>
						</template>
					</el-table-column>
					<el-table-column slot="patient_sex" label="患者性别" width="120px">
						<template slot-scope="{ row }">
							<span v-if="row.pateint_sex === 0">男</span>
							<span v-if="row.pateint_sex === 1">女</span>
							<span v-if="row.pateint_sex === 2">未知</span>
						</template>
					</el-table-column>
				</my-table>
			</div>
			<div class="icon" @click="drawer = true">
				<span class="iconfont">&#xe667;</span>
			</div>
		</section>

		<el-dialog title="信息修改" :visible.sync="dialogFormVisibleUpdate" center　 width="35%">
			<el-form :model="formUpdate" :label-position="labelPosition">
				<el-form-item label="身份证号:" label-width="120px">
					<el-input v-model="formUpdate.mobile_phone" placeholder="身份证号" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号:" label-width="120px">
					<el-input v-model="formUpdate.id_card_no" placeholder="手机号" @input="phoneChange" autocomplete="off">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
				<el-button type="primary" @click="updateMsg">确 定</el-button>
			</div>
		</el-dialog>

		<el-drawer :visible.sync="drawer" :with-header="false" :direction="direction" :size="drawerWidth">
			<div class="demo-drawer__content">
				<div class="drawer_title">
					<el-row>
						<el-col :span="4">自定义列表</el-col>
						<el-col :span="2" :offset="18">
							<span class="iconfont drawer_icon" @click="drawer = false">&#xe686;</span>
						</el-col>
					</el-row>
				</div>
				<selfcoloumn></selfcoloumn>
			</div>
		</el-drawer>
		<div class="robot">
			<robot></robot>
		</div>
	</div>
</template>

<script>
import selfcoloumn from './selfcoloumn.vue'
import searchBar from '@/components/searchBar'
import robot from './robot.vue'
import myTable from 'components/myTable'
import { checkPhone } from '@/utils/validate'
import { getList } from '@/api/archive-record'

export default {
	name: 'taskManager',
	components: {
		myTable,
		searchBar,
		selfcoloumn,
		robot,
	},
	data () {
		return {
			listQuery: {
				pagesize: 10,
				pageindex: 1,
			},
			colConfigs: [
				// todo 字段缺失
				{
					type: 'index',
					label: '序号',
				},
				{ slot: 'opt' },
				{
					prop: 'patient_name',
					label: '患者姓名',
				},
				{
					prop: 'med_rec_no',
					label: '病历号',
				},
				{ slot: 'patient_class' },
				{
					prop: 'depart_name',
					label: '检查科室',
				},
				{
					prop: 'exam_type',
					label: '检查类型',
				},
				{
					prop: 'exam_item',
					label: '检查项目',
				},
				{
					prop: 'id_card_no',
					label: '身份证号',
				},
				{
					prop: 'disk_space',
					label: '存储容量',
					sortable: true,
				},
				{
					prop: 'perform_time',
					label: '检查时间',
					sortable: true,
				},
				{
					prop: 'report_time',
					label: '报告时间',
					sortable: true,
				},
				{
					prop: 'archive_time',
					label: '归档时间',
					sortable: true,
				},
			],
			tableData: [],
			total: null,
			listLoading: false,
			labelPosition: 'left',
			dialogFormVisibleUpdate: false,
			formUpdate: {
				mobile_phone: null,
				id_card_no: null,
				patient_info_id: null, // 患者唯一编号
			},
			drawer: false,
			drawerWidth: '50%',
			direction: 'rtl',
			columnVal: [ 1, 4 ],
			positionX: 0,
			positionY: 0,
		}
	},
	computed: {},
	created () { },
	mounted () {
		this.getList()
	},
	methods: {
		getTime ( val ) {
			//  时间选择
			console.log( val )
			this.getList()
		},
		getList ( val ) {
			// 获取列表统计
			const params = Object.assign( this.listQuery, val )
			getList( params ).then( res => {
				this.tableData = res.data
				this.total = res.total
				console.log( res )
			} )
		},
		sortChange ( val ) {
			//  排序
			console.log( val )
		},
		getTaskList ( val ) {
			// 查询任务列表
		},
		handleDetail () {
			// 查看详情
			this.$router.push( {
				name: 'ArchiveDetails',
				params: { id: 111 },
			} )
		},
		handleUate () {
			// 补全信息
			this.dialogFormVisibleUpdate = true
		},
		updateMsg () {

      /*
       * 信息修改
       * this.dialogFormVisibleUpdate = true
       * todo 校验格式
       */
			if ( formUpdate.mobile_phone ) {
				checkPhone( formUpdate.mobile_phone )
			}
		},
		phoneChange () {
			const reg = /^1[3456789]\d{9}$/
			if (
				this.formUpdate.mobile_phone.length >= 11
				&& !reg.test( this.formUpdate.mobile_phone )
			) {
				alert( '请输入正确的手机号码格式' )
			}
		},
		setColumn () {
			// 自定义列表
		},
		cancelForm () {
			// 取消
		},
		submitColumn () {
			// 取消
		},
	},
	watch: {},
	filter: {},
}
</script>
<style scoped lang="less">
.container {
	padding: 0 25px;
	// overflow-y: hidden;
	section {
		position: relative;
		.icon {
			width: 30px;
			height: 30px;
			position: absolute;
			right: -30px;
			top: 10px;
			color: #0a70b0;
		}
	}
	.btns {
		margin-bottom: 20px;
	}
	.data {
		// height: 161px;
		padding: 43px 0;
		box-shadow: 0px 0px 14px 0px rgba(1, 1, 100, 0.1);
		border-radius: 8px;
		margin-bottom: 42px;
		text-align: center;
		div {
			height: 75px;
			width: 12%;
			display: inline-block;
			border-right: 1px solid #ddd;
			text-align: center;
			h2 {
				font-size: 16px;
				font-weight: normal;
				height: 42px;
				line-height: 22px;
				color: #333333;
			}
			h3 {
				height: 42px;
				font-size: 30px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				line-height: 42px;
				color: @49B523;
			}
		}
	}
	.cell {
		.el-button {
			padding: 0;
		}
	}
	.el-input {
		width: 200px !important;
	}
	#el-drawer {
		width: 50%;
	}
	.drawer_title {
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #f5f5f5;
		color: #333333;
		font-weight: 500;
		text-indent: 20px;
		margin: 0 0 20px 0;
		.el-row {
			margin: 0;
		}
	}
	.el-col-4 {
		text-align: left;
	}
	.drawer_icon {
		font-size: 16px;
		color: #333;
	}
	.robot {
		position: absolute;
		bottom: -6vw;
		right: 0;
		z-index: 10000;
	}
}
</style>
